<template>
  <div class="container">
    <!-- <el-row>
      <el-col class="topTitle">通知列表</el-col>
    </el-row> -->
    <topTitle titleText="通知列表"></topTitle>
    <div class="mainCon">
      <ul class="messageList">
        <li>
          <h4>
            全部通知
            <b>(未读{{ message }})</b>
          </h4>
          <span @click="keyReadAll">标记全部已读</span>
          <!--   <el-select v-model="filterField.typeId" filterable  clearable v-if="loginType=='QY'"  class="messageSelect" @input="searchList"  >
            <el-option v-for="item in noticeTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>-->
          <!-- <el-form :inline="true" :model="filterField" class="searchForm">
          <el-form-item label="状态" class="row-padding-bottom">-->
          <div class="searchItem">
            状态
            <el-select
              v-model="filterField.isRead"
              clearable
              filterable
              placeholder="请选择"
              @change="changeStatus"
            >
              <el-option
                v-for="(item, index) of isReadData"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
          <!-- </el-form-item> -->
          <!-- <el-form-item label="通知类型" class="row-padding-bottom">  -->
          <div class="searchItem">
            通知类型
            <el-select
              v-model="filterField.type"
              clearable
              filterable
              placeholder="请选择"
              @change="changeType"
            >
              <el-option
                v-for="(item, index) of typeData"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
          <div class="searchItem" style="margin-left: 10px">
            <exportBtn
              :dataLen="tableList.length"
              :filterField="filterField"
              :api="api"
            ></exportBtn>
          </div>
          <!-- </el-form-item>   -->
          <!-- </el-form>  -->
        </li>

        <li style="text-align: center" v-show="noNotice">
          <span>暂无通知</span>
        </li>
        <!--这一项只是做个模板-->
        <template v-for="(item, index) in tableList">
          <li class="marginLeft" :key="index">
            <div class="dot" v-if="item.isRead == 0"></div>
            <!-- <div class="dot" v-if="loginType=='JC'&&item.mointerStatus==0"></div> -->
            <!-- <h4 v-if="loginType=='QY'">{{item.title}} <i :class="[item.isRead==0? 'redColor':'grayColor']">&nbsp;[{{item.companyStatus==0?'未读':'已读'}}]</i></h4> -->
            <h4>
              {{ item.title }}
              <i :class="[item.isRead == 0 ? 'redColor' : 'grayColor']"
                >&nbsp;[{{ item.isRead == 0 ? '未读' : '已读' }}]</i
              >
            </h4>
            <!-- 重大事件和违法登记不能跳转，人员申请也暂不跳 -->
            <p>
              {{ item.content }}
              <el-link
                v-show="
                  item.type != '07' &&
                  item.type != '08' &&
                  item.type != '05' &&
                  isShowDetail &&
                  roleType != 'constructor'
                "
                @click="
                  toDetail(item.id, item.type, item.businessId, item.title)
                "
                class="detailInfo"
                >点此查看详情</el-link
              >
              <!-- 建设方跳转详情 -->
              <el-link
                v-show="
                  roleType == 'constructor' &&
                  (item.type == '01' ||
                    item.type == '07' ||
                    item.type == '08' ||
                    item.type == '14') &&
                  isShowDetail
                "
                @click="
                  toDetail(item.id, item.type, item.businessId, item.title)
                "
                class="detailInfo"
                >点此查看详情</el-link
              >
            </p>
          </li>
        </template>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->

        <!-- getTableList为获取子组件的数据 -->
        <el-col
          :span="24"
          class="toolbar"
          style="text-align: right; padding-bottom: 16px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentTotal"
          ></el-pagination>
        </el-col>
      </ul>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'messageList',
  components: {},
  data() {
    return {
      firstLoadFlag: true,
      titleText: '',
      back: true,
      // noticeTypes: [],
      //表格数据
      tableList: [],
      noNotice: false,
      currentPage: 1,
      pageSize: 20,
      currentTotal: 0,
      requestUrl: '',
      unReadFlag: 1,
      message: 0,
      //搜索条件
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        isRead: '',
        type: '',
      },
      isShowDetail: '',
      loginType: '',
      roleType: '', //角色
      typeCjId: '01',
      alertId: '',
      isShow: '',
      projectId: '', //企业传
      isReadData: [
        {
          code: '1',
          name: '已读',
        },
        {
          code: '0',
          name: '未读',
        },
      ],
      typeData: [],
      api: '',
    }
  },
  created() {
    this.openFullScreen()
    // if(this.firstLoadFlag){
    this.firstLoadFlag = false
    this.loginType = localStorage.getItem('loginType')
    this.searchList()
    this.getMessageCount()
    this.getTypeData()
    this.getApi()
    if (this.$store.state.userType === 'COMPANY') {
      if (localStorage.getItem('judgeRoleCode') == 'constructor') {
        this.roleType = 'builder' //施工方
      } else if (localStorage.getItem('judgeRoleCode') == 'owner') {
        this.roleType = 'constructor' //建设方
      }
    }
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('messageList:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('messageListSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('messageListJSF:detail') > -1
  },
  methods: {
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
    },
    closeFullScreen(loading) {
      this.loading.close()
    },
    getMessageCount() {
      //监察统计条数

      this.axios({
        method: 'post',
        url: 'api-i/infocenter/expand/searchinfocount',
        data: { isRead: '0' },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.message = resp.data.result
          } else {
            console.log(resp.data.errorMsg)
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    // 搜索
    searchList() {
      this.loginType = localStorage.getItem('loginType')
      this.requestUrl = 'api-i/infocenter/expand/searchinfolist'
      if (this.loginType === 'QY' || this.loginType === 'XM') {
        this.isShow = 'no'
      } else {
        // this.requestUrl="api-i/infocenter/expand/searchinfolist";
        this.isShow = 'yes'
        // this.filterField.typeId=this.typeCjId
      }
      this.axios({
        method: 'POST',
        url: this.requestUrl,
        data: {
          sysAppCode:
            this.$store.state.userType === 'FENBAO_MANAGER'
              ? 'FENBAO_MANAGER'
              : localStorage.getItem('judgeRoleCode'),
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          type: this.filterField.type,
          isRead: this.filterField.isRead,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            // this.tableList = response.data.result.results;
            if (response.data.result.results) {
              if (response.data.result.results == 0) {
                this.noNotice = true
              } else {
                this.noNotice = false
              }
              this.tableList = response.data.result.results
              this.currentTotal = response.data.result.totalCount
              this.closeFullScreen()
            } else {
              this.closeFullScreen()
              this.noNotice = true
              this.tableList = []
            }
          }
        })
        .catch((error) => {
          this.closeFullScreen()
          this.noNotice = true
          this.$message.error('数据获取失败')
        })
    },

    keyReadAll() {
      var url = 'api-i/infocenter/expand/updateallreadstatus'
      // var param={};
      // if ( this.loginType === 'QY') {
      //   param={typeId:this.filterField.typeId};
      //   url="api-i/infocenter/expand/editstatusbycompany";
      // }else{

      //   url="/api-i/infocenter/expand/updateInfoMonitorStatus";
      //   param={typeId:this.typeCjId};
      // }

      this.axios({
        method: 'post',
        url: url,
        data: {
          isRead: '1',
        },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.searchList()
            this.getMessageCount()
          } else {
            console.log(resp.data.errorMsg)
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },

    toDetail(id, typeId, businessId, title) {
      console.log(typeId)
      // 本期企业端需新增通知类型：项目申报通知、申请加入项目通知、项目评级通知
      // 监察端新增通知类型：账号审核通知、维权纠纷通知
      this.axios({
        method: 'post',
        url: 'api-i/infocenter/expand/updatereadstatus',
        data: { infoId: id, isRead: '1' },
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            //console.log("请求updateOneInfoState_OK");
          } else {
            // console.log(resp.data.errorMsg);
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })

      if (typeId == '00') {
        //(typeId=='01')
        // /home/project/constructAlertDetail
        //预警详情
        this.$router.push({
          path: '/home/onlineLaw/qyDetailProposal',
          name: 'qyDetailProposal',
          query: {
            id: businessId,
          },
        })
        this.$store.commit('set_active_index', '/home/onlineLaw/qyProposal')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/onlineLaw/qyProposal',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }

      if (typeId == '01') {
        //(typeId=='01')
        // /home/project/constructAlertDetail
        //预警详情
        this.$router.push({
          path: '/home/project/constructAlertDetail',
          name: 'constructAlertDetail',
          query: {
            alertId: businessId,
          },
        })
        this.$store.commit(
          'set_active_index',
          '/home/project/constructAlertProjectList'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/constructAlertProjectList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '05') {
        // /home/employee/projectEmployeeApply
        // 人员申请加入项目
        this.$router.push({
          path: '/home/employee/projectEmployeeApply',
          name: 'projectEmployeeApply',
          query: {
            alertId: businessId,
          },
        })
        this.$store.commit(
          'set_active_index',
          '/home/employee/projectEmployeeApply'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeApply',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '04') {
        // 项目申请
        this.$router.push({
          path: '/home/project/projectDeclareDetail',
          name: 'projectDeclareDetail',
          query: {
            id: businessId,
          },
        })
        this.$store.commit(
          'set_active_index',
          '/home/project/projectDeclareList'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/project/projectDeclareList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '06') {
        // 项目评价详情
        this.$router.push({
          path: '/home/projectScore/evaluationDetail',
          name: 'evaluationDetail',
          query: {
            projectId: businessId,
          },
        })
        this.$store.commit(
          'set_active_index',
          '/home/projectScore/projectEvaluationList'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/projectScore/projectEvaluationList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '03') {
        // 合同签订，跳转花名册列表
        this.$router.push({
          path: '/home/employee/projectEmployeeQY',
          name: 'projectEmployeeQY',
          // query: {
          //     projectId: businessId,
          // }
        })
        this.$store.commit(
          'set_active_index',
          '/home/employee/projectEmployeeQY'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId === '09') {
        if (title === '工伤保险通知') {
          this.$router.push({
            path: '/home/ESinsurance/EsInsurance',
            name: 'EsInsurance',
            query: {
              projectId: businessId,
            },
          })
          this.$store.commit(
            'set_active_index',
            '/home/ESinsurance/EsInsurance'
          )
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/ESinsurance/EsInsurance',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
        if (title === '工伤保险人员备案表导入成功') {
          this.$router.push({
            path: '/home/ESinsurance/improveEmployeeList',
            name: 'improveEmployeeList',
          })
          this.$store.commit(
            'set_active_index',
            '/home/ESinsurance/improveEmployeeList'
          )
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/ESinsurance/improveEmployeeList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
      if (typeId == '10') {
        // 专户列表
        this.$router.push({
          path: '/home/specialAccount/specialAccountList',
          name: 'specialAccountList',
        })
        this.$store.commit(
          'set_active_index',
          '/home/specialAccount/specialAccountList'
        )
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/specialAccount/specialAccountList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '11' || typeId == '15') {
        //保证金详情 掉接口确定保证金详情页面
        this.axios({
          method: 'post',
          url: 'api-d/deposit/expand/detailcheck',
          data: {
            id: businessId,
          },
        })
          .then((res) => {
            if (!res.data.hasError) {
              var data = res.data.result
              var query = {
                projectId: data.projectId,
                depositId: data.id, //后台返回的保证金id
                method: data.method, //根据缴纳方式和缴纳形式确定页面样式
                payMethod: data.payMethod,
                statusDesc: data.approvalStatusDesc,
                projectName: data.projectName,
              }
              // 区分监察，项目企业的详情
              if (this.loginType === 'JC') {
                this.$router.push({
                  path: '/home/cashDeposit/cashDepositJcDetail',
                  name: 'cashDepositJcDetail',
                  query: query,
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/cashDeposit/cashDepositListJC',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              } else {
                this.$router.push({
                  path: '/home/cashDeposit/cashDepositList',
                  name: 'cashDepositList',
                  query: query,
                })
                this.$store.commit('CHANGE_SLIDER_NAME', {
                  oldUrl: '/home/cashDeposit/cashDepositList',
                  newUrl: this.$router.currentRoute.fullPath,
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: res.data.errorMsg,
              })
            }
          })
          .catch((error) => {
            this.$message.error('数据获取失败')
          })
      }
      /**
       * @name:工资专户 跳转工资详情页面
       * @param {string} typeId
       * @Author: luoyong/471826078@qq.com
       */
      if (typeId == '13') {
        this.axios
          .post('api-su/cs/salary/expand/detailById', { id: businessId })
          .then((res) => {
            if (!res.data.hasError) {
              let row = res.data.result
              this.$router.push({
                path: '/home/salaryDf/salaryPayBatchDetailList',
                name: 'salaryPayBatchDetailList',
                query: {
                  salaryId: businessId,
                  yearQuery: row.year,
                  statusQuery: row.status,
                  batchNoInfo:
                    row.year +
                    '年' +
                    row.month +
                    '月第' +
                    row.batchNo +
                    '批次工资',
                  projectId: row.projectId,
                  rejectReason: row.rejectReason,
                  sequenceCode: row.sequenceCode,
                  monthQuery: row.month,
                  batchNo: row.batchNo,
                },
              })
              this.$store.commit(
                'set_active_index',
                '/home/salaryDf/companySalaryBatchList'
              )
              this.$store.commit('CHANGE_SLIDER_NAME', {
                oldUrl: '/home/salaryDf/companySalaryBatchList',
                newUrl: this.$router.currentRoute.fullPath,
              })
            }
          })
      }
      // 建设方跳转通知
      if (typeId == '14') {
        // 拨付计划通知
        // 查看计划
        this.$router.push({
          path: '/home/separateAccountManagement/allocationPlanDetail',
          name: 'allocationPlanDetail',
          query: {
            disbursePlanId: businessId,
            type: 'detail',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/specialAccount/specialAccountList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '08') {
        // 重大事件通知
        // 查看计划
        this.$router.push({
          path: '/home/illegal/bigEventDetail',
          name: 'bigEventDetail',
          query: {
            id: businessId,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/illegal/bigEvent',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '07') {
        // 违法记载通知
        // 查看计划
        this.$router.push({
          path: '/home/illegal/recordDetail',
          name: 'illegalRecordDetail',
          query: {
            id: businessId,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/illegal/illegalRecord',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      //劳资信息审核通知
      if (typeId == '16') {
        this.$router.push({
          path: '/home/employee/laborAuditDetailCz',
          name: 'laborAuditDetailCz',
          query: {
            id: businessId,
            path: 'laborInfoCz',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/laborInfoCz',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (typeId == '18') {
        // 项目详情
        if (localStorage.getItem('loginType') == 'XM') {
          this.$router.push({
            path: '/home/indexHome/projectHome',
            name: 'projectHome',
            query: {
              projectId: businessId,
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/indexHome/projectHome',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else if (localStorage.getItem('loginType') == 'QY') {
          this.$router.push({
            path: '/home/monitorProjectManagement/projectDetail',
            name: 'projectDetail',
            query: {
              projectId: businessId,
              // companyType: companyType
            },
          })
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectListQY',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    },

    getMessageDetail() {
      this.$router.push({ name: 'messageDetail' })
    },
    getTableList(data) {
      this.tableList = data
      //console.log(this.$refs.pagination);
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchList()
    },
    changeStatus(val) {
      this.searchList()
      this.getMessageCount()
    },
    changeType(val) {
      this.searchList()
      this.getMessageCount()
    },
    getTypeData() {
      let url = 'api-bs/base/dicitem/findbytype'
      let data = { type: 'INFO_CENTER_TYPE' }
      if (
        this.$store.state.userType === 'FENBAO_MANAGER' ||
        (this.$store.state.userType === 'COMPANY' &&
          localStorage.getItem('judgeRoleCode') === 'owner')
      ) {
        url = 'api-i/infocenter/expand/findInfoType'
        data.sysAppCode =
          this.$store.state.userType === 'FENBAO_MANAGER'
            ? 'FENBAO_MANAGER'
            : 'owner'
      }
      this.axios({
        method: 'post',
        data,
        url,
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.typeData = response.data.result
              if (this.$store.state.userType == 'FENBAO_MANAGER') {
                this.filterField.type = '13'
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getApi() {
      let loginType = localStorage.getItem('loginType')
      if (loginType === 'JC') {
        this.api = 'api-s/report/export_JC_CS_INFO'
      } else if (loginType === 'QY') {
        this.api = 'api-s/report/export_QY_INFO'
      } else if (loginType === 'XM') {
        this.api = 'api-s/report/export_XM_INFO'
      }
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font-weight: bold;
  font-size: 18px;
  line-height: 67px;
  color: #333;
}
.redColor {
  color: #ff0000;
}
.grayColor {
  color: #999;
}
.detailInfo {
  position: relative;
  top: -1px;
}
.container {
  .mainCon {
    padding: 24px;
    height: calc(100% - 67px);
    overflow-y: auto;
    .messageList {
      font-size: 14px;
      li {
        position: relative;
        padding: 16px 0;
        border-bottom: 2px solid #f5f7fa;
        color: #666;
        &:first-child {
          padding-top: 0;
        }
        .dot {
          position: absolute;
          left: 0;
          top: 29px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #ff0000;
        }
        h4 {
          font-size: 16px;
          display: inline-block;
          margin-right: 50px;
          color: #333;
          line-height: 36px;
          b {
            color: #666;
            font-weight: normal;
          }
        }
        span {
          cursor: pointer;
          line-height: 40px;
          &:hover {
            color: #66b1ff;
          }
        }
        i {
          font-style: normal;
          text-decoration: none;
          font-weight: normal;
          font-size: 14px;
        }
        p {
          margin-top: 10px;
        }
        .messageSelect {
          position: absolute;
          right: 0;
          top: 4px;
        }
      }
      .marginLeft {
        padding-left: 20px;
      }
    }
  }
}

.searchItem {
  display: inline-block;
  font-size: 14px;
}

.searchItem:nth-of-type(1) {
  margin-left: 50px;
  margin-right: 10px;
}
</style>
